<template>
    <el-dialog v-model="addOrEditVisible" title="${codeGenComment?default('')}" :before-close="closeEditDialog"
               width="50%">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
                 :size="formSize" status-icon>
            <#list columns as column>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="${column.column_comment}" prop="${column.camel_case_column_name}">
                            <el-input v-model="ruleForm.${column.camel_case_column_name}"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </#list>
        </el-form>
        <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeEditDialog">关闭</el-button>
           <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
         </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import {reactive, ref} from 'vue'
    import type ${r'{'}FormInstance, FormRules${r'}'} from <#noparse> 'element-plus' </#noparse>
    import {ElMessage} from "element-plus";
    import router from "@/router";
    import ${r'{'}${entityName} ${r'}'} from '@/apis/model/${lastPackageName}/${entityName}Model';
    import {insert${entityName}, update${entityName}} from '@/apis/http/${lastPackageName}/${entityName}Http';

    interface Prop {
        addOrEditVisible${r':'} boolean,
        ruleForm${r':'} ${entityName},
        addDataType${r':'} string
    }

    // 刷新list页面
    const refushList = ref(false);

    // 传递过来的参数
    const props = defineProps${r'<Prop>();'}

    const emit = defineEmits(["closeEditDialog"]);

    // 关闭按钮
    const closeEditDialog = () => {
        emit("closeEditDialog", {
            addOrEditVisible: !props.addOrEditVisible,
            refushList: refushList.value
        })
    }
    const formSize = ref('default')
    const ruleFormRef = ref < FormInstance > ${r'()'}

    const rules = reactive < FormRules > ({
        <#list columns as column>
        ${column.camel_case_column_name}: [
            {required: true, message: '请输入${column.column_comment}', trigger: 'blur'}
        ],
        </#list>
    })

    const submitForm = async ${r'(formEl: FormInstance | undefined) => {'}
    if (!formEl) ${r' return '}
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 新增
            if (props.addDataType === 'add') {
                insert${entityName}(props.ruleForm).then(res => {
                    const code = res.code;
                    const message: string = res.message;
                    const data = res.data;
                    if (code == 200) {
                        ElMessage({
                            message: '创建成功！',
                            type: 'success',
                        })
                        refushList.value = true
                        closeEditDialog()
                    } else {
                        ElMessage.error('创建失败！')
                    }
                })
            } else if (props.addDataType === 'edit') {
                update${entityName}(props.ruleForm).then(res => {
                    const code = res.code;
                    const message: string = res.message;
                    const data = res.data;
                    if (code == 200) {
                        ElMessage({
                            message: '更新成功！',
                            type: 'success',
                        })
                        refushList.value = true
                        closeEditDialog()
                    } else {
                        ElMessage.error('更新失败！')
                    }
                })
            }

        } else {
            ElMessage.error('请完善信息！')
        }
    })
    }
</script>

<style scoped>
    .dialog-footer button:first-child {
        margin-right: 10px;
    }
</style>
